<template>
  <!-- 个人资料 -->
  <div class="h-full overflow-hidden">
    <div>
      <div><HeadTail></HeadTail></div>
    </div>
    <div class="flex mt-4 h-full">
      <div class="w-1/2 border-t-2 border-r-2 border-black">
        <div class="w-4/6 flex flex-col m-auto">
          <div class="w-full flex justify-between text-white mt-4">
            <button
              class="bg-[#fdc14b] xl:text-[30px] h-2/3 mt-[1%] p-1 rounded-lg"
              @click="tohome"
            >
              返回首页
            </button>
            <button
              class="bg-[#fdc14b] sm:text-[25px] xl:text-[45px] px-5 rounded-lg"
            >
              个人资料
            </button>
          </div>
          <div>
            <div>
              <div
                class="sm:w-[62px] sm:h-[62px] xl:w-[124px] xl:h-[124px] rounded-full overflow-hidden"
              >
                <img src="" alt="" />
              </div>
            </div>
            <div class="mt-8">
              <div
                class="flex justify-between border-2 border-[#fdc14b] rounded-lg"
              >
                <p class="p-2 xl:text-[35px]">手机号:{{ user.phone }}</p>
                <div class="flex items-center px-4">
                  <button
                    class="border border-[#fdc14b] rounded-lg px-2"
                    @click="centerDialogVisible = true"
                  >
                    修改
                  </button>
                </div>
              </div>
              <div
                class="border-2 border-[#fdc14b] rounded-lg mt-8 flex justify-between"
              >
                <div class="flex justify-between w-2/3 xl:text-[30px] p-2">
                  <p class="w-full">联系人：{{ user.name }}</p>
                </div>
                <div class="flex items-center px-4">
                  <button
                    class="border border-[#fdc14b] rounded-lg px-2"
                    @click="centerDialogVisible2 = true"
                  >
                    修改
                  </button>
                </div>
              </div>
              <div
                class="border-2 border-[#fdc14b] rounded-lg flex w-full justify-between mt-8"
              >
                <div class="w-3/5">
                  <div class="flex items-center ml-2 p-1">
                    <p class="xl:text-[35px]">
                      {{ user.address }}
                    </p>
                  </div>
                </div>
                <div class="flex items-center px-4">
                  <button
                    class="border border-[#fdc14b] rounded-lg px-2"
                    @click="centerDialogVisible3 = true"
                  >
                    修改
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="w-1/2 border-t-2 border-black">
        <div class="flex flex-col items-center m-auto mt-4">
          <div class="flex justify-between text-white w-5/6">
            <button
              class="bg-[#fdc14b] sm:text-[25px] xl:text-[45px] px-5 rounded-lg"
              @click="getmyorder"
            >
              我的订单
            </button>
            <button
              class="bg-[#fdc14b] sm:text-[25px] xl:text-[45px] px-5 rounded-lg"
              @click="getmystore"
            >
              我的收藏
            </button>
          </div>
          <div class="w-5/6">
            <component :is="show"></component>
          </div>
        </div>
      </div>
    </div>
  </div>
  <el-dialog
    v-model="centerDialogVisible"
    title="修改"
    width="30%"
    align-center
  >
    <div>
      <label for="">手机号：</label>
      <input
        type="text"
        class="border border-zinc-400 outline-none w-full"
        :placeholder="user.phone"
        v-model="phone"
      />
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="change"> 确认 </el-button>
      </span>
    </template>
  </el-dialog>
  <el-dialog
    v-model="centerDialogVisible2"
    title="修改"
    width="30%"
    align-center
  >
    <div>
      <label for="">联系人：</label>
      <input
        type="text"
        class="border border-zinc-400 outline-none w-full"
        :placeholder="user.name"
        v-model="username"
      />
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="centerDialogVisible2 = false">取消</el-button>
        <el-button type="primary" @click="change2"> 确认 </el-button>
      </span>
    </template>
  </el-dialog>
  <el-dialog
    v-model="centerDialogVisible3"
    title="修改"
    width="30%"
    align-center
  >
    <div>
      <label for="">地址：</label>
      <input
        type="text"
        class="border border-zinc-400 outline-none w-full"
        :placeholder="user.address"
        v-model="useraddress"
      />
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="centerDialogVisible3 = false">取消</el-button>
        <el-button type="primary" @click="change3"> 确认 </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import HeadTail from "@/components/Nhome/HeadTail.vue";
import { reactive, ref, onMounted } from "vue";
import myorder from "./myorder.vue";
import mystore from "./mystore.vue";
import { useRouter, useRoute } from "vue-router";
import axios from "axios";
const route = useRoute();
let router = useRouter();
let show = ref(myorder);
function getmyorder() {
  show.value = myorder;
}
function getmystore() {
  show.value = mystore;
}
function tohome() {
  router.push("Nhome");
}
let chashow = ref(false);
let user = ref({});
function changeuser() {
  axios
    .put(
      `http://1.14.126.98:8081/user/updateUser?userId=${userid.value}&name=测试用的&phone=12345678999&description=爱好&address=上海`
    )
    .then((res) => {
      user.value = res.data;
      axios
        .get(`http://1.14.126.98:8081/user/all?userId=${userid.value}`)
        .then((res) => {
          user.value = res.data.data;
          console.log(res.data.data);
        });
    });
}
let userid = ref();
onMounted(() => {
  userid.value = route.query.id;
  axios
    .get(`http://1.14.126.98:8081/user/all?userId=${userid.value}`)
    .then((res) => {
      user.value = res.data.data;
      console.log(user.value);
    });
});
const centerDialogVisible = ref(false);
const centerDialogVisible2 = ref(false);
const centerDialogVisible3 = ref(false);
let phone = ref();
function change() {
  centerDialogVisible.value = false;
  axios
    .put(
      `http://1.14.126.98:8081/user/updateUser?userId=${userid.value}&phone=${phone.value}`
    )
    .then((res) => {
      user.value = res.data;
      axios
        .get(`http://1.14.126.98:8081/user/all?userId=${userid.value}`)
        .then((res) => {
          user.value = res.data.data;
          console.log(res.data.data);
        });
    });
}
let username = ref();
function change2() {
  centerDialogVisible2.value = false;
  axios
    .put(
      `http://1.14.126.98:8081/user/updateUser?userId=${userid.value}&name=${username.value}`
    )
    .then((res) => {
      user.value = res.data;
      axios
        .get(`http://1.14.126.98:8081/user/all?userId=${userid.value}`)
        .then((res) => {
          user.value = res.data.data;
          console.log(res.data.data);
        });
    });
}
let useraddress = ref();
function change3() {
  centerDialogVisible3.value = false;
  axios
    .put(
      `http://1.14.126.98:8081/user/updateUser?userId=${userid.value}&address=${useraddress.value}`
    )
    .then((res) => {
      user.value = res.data;
      axios
        .get(`http://1.14.126.98:8081/user/all?userId=${userid.value}`)
        .then((res) => {
          user.value = res.data.data;
          console.log(res.data.data);
        });
    });
}
</script>
